<template>
  <div>
    <div class="nav">
      <ul v-for="(item, index) in this.list" :key="item.index">
        <li @click="() => this.btnMenu(index, item.link)">
          <router-link
            :class="this.isActiveNum === index ? 'isActive' : ''"
            :to="item.link"
            >{{ item.menu }}</router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, toRaw, ref, onMounted } from "vue";

export default {
  setup() {
    const isActiveNum = ref(sessionStorage.getItem("key") - 0);
    const newHash = ref(window.location.hash);
    const refUl = ref(null);
    const key = ref(0);
    const menuList = reactive([
      { menu: "首页", link: "/home" },
      { menu: "作品", link: "/works" },
      { menu: "博客", link: "/wantsay" },
      { menu: "关于", link: "/about" },
      { menu: "技术栈", link: "/comment" },
      { menu: "回放", link: "/back" },
    ]);
    const list = toRaw(menuList);
    onMounted(() => {
      console.log(isActiveNum.value);
    });
    const btnMenu = (index, link) => {
      sessionStorage.setItem("key", index);
      isActiveNum.value = index;
      console.log(window.location.hash.split("/")[1], "9090");
      let newLink = "/" + window.location.hash.split("/")[1];
      console.log(newLink, "00");
      // if (item.link === window.location.hash)
      console.log(window.location, "0000");
    };

    return { btnMenu, isActiveNum, refUl, list };
  },
};
</script>

<style scoped>
.nav ul {
  float: left;
}
li {
  display: inline-block;
  margin-right: 30px;
}
li a {
  display: inline-block;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-size: 14px;
  height: 100%;
}
li a:hover {
  color: #f23051;
}
.isActive {
  color: #f23051;
}
</style>
